<template>
	<div style="display: flex; align-items: center">
		<div :class="{ import: isImport }" :style="{ width: LWidth }" style="text-align: end; padding-right: 10px; font-size: 12px">{{ title }}</div>
		<el-input style="flex: 1" :value="val" :disabled="disabled" :placeholder="placeHolder" />
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const props = defineProps({
	val: {
		value: String || Number,
		default: '',
	},
	disabled: {
		value: Boolean,
		default: false,
	},
	title: {
		value: String,
		default: '',
	},
	placeHolder: {
		value: String,
		default: '',
	},
	LWidth: {
		value: String,
		default: '100px',
	},
	//是否需要红点*提示
	isImport: {
		value: Boolean,
		default: false,
	},
});
</script>

<!-- scoped属性使style有自己独立的作用域(属性选择器实现 title[data-v-xxx]) -->
<style scoped lang="scss">
//通过class修改el-UI内置样式
.el-input.is-disabled .el-input__inner {
	-webkit-text-fill-color: #030303 !important;
}
.el-input.is-disabled .el-input__wrapper {
	background-color: white !important;
}
</style>
